<!--
 * @Autor: dingxiaolin
 * @Date: 2021-10-13 16:10:53
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-11-13 18:28:59
-->
<template>
    <div id="pieChart"></div>
</template>

<script>
//五天内各行政区药品销量统计
import echarts from 'echarts';
import { api } from '@/http/api';

export default {
    name: 'pieChart',
    components: {},
    computed: {},
    data() {
        return {
            timeData: [
                { type: '一个月以下', count: '8', percentage: '0.018604651' },
                { type: '1-3个月', count: '26', percentage: '0.0604651162790698' },
                { type: '4-6个月', count: '58', percentage: '0.134883720930233' },
                { type: '7-9个月', count: '47', percentage: '0.109302325581395' },
                { type: '10-12个月', count: '54', percentage: '0.125581395348837' },
                { type: '1年以上', count: '237', percentage: '0.551162790697674' },
            ],
        };
    },
    mounted() {
        setTimeout(() => {
            this.drawChart();
        });
    },
    methods: {
        drawChart() {
            var pieChart = echarts.init(document.getElementById('pieChart'));
            window.addEventListener('resize', () => {
                pieChart.resize();
            });
            var dataName = [];
            var dataArray = [];
            api.InformationRecord_GetInformationPercentage().then((res) => {
                res.items.map((v) => {
                    dataName.push(v.area);
                    dataArray.push({
                        value: v.num,
                        name: v.area,
                    });
                });
                var option = {
                    color: ['#F19611 ', '#0096FF', '#FFFFCC', '#0099CC', '#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
                    title: {
                        top: '5%',
                        left: '5%',
                        text: '五天内各行政区药品销量统计',
                        textStyle: {
                            color: '#ddd',
                            fontSize: 14,
                        },
                    },
                    grid: {
                        top: '3%',
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)',
                    },
                    legend: {
                        // top: 'middle',
                        orient: 'vertical',
                        right: '5%',
                        top: 'center',
                        data: dataName,
                        textStyle: {
                            color: '#ddd',
                        },
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '45%',
                            center: ['45%', '55%'],
                            selectedMode: 'single',
                            data: dataArray,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                                },
                            },
                        },
                    ],
                };
                pieChart.setOption(option);
            });
        },
    },
};
</script>

<style lang='scss' scoped>
#pieChart {
    width: 100%;
    height: 100%;
}
</style>
